import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import Tabs from './index'
import Icon from '../Icon'
const defaultTabs = () => (
  <Tabs onSelect={action('selected')}>
    <Tabs.TabItem label="选项卡一">this is content one</Tabs.TabItem>
    <Tabs.TabItem label="选项卡二">this is content two</Tabs.TabItem>
    <Tabs.TabItem label="用户管理">this is content three</Tabs.TabItem>
  </Tabs>
)

const cardTabs = () => (
  <Tabs onSelect={action('selected')} type="card">
    <Tabs.TabItem label="card1">this is card one</Tabs.TabItem>
    <Tabs.TabItem label="card2">this is content two</Tabs.TabItem>
    <Tabs.TabItem label="disabled" disabled>
      this is content three
    </Tabs.TabItem>
  </Tabs>
)

const customTabs = () => (
  <Tabs onSelect={action('selected')} type="card">
    <Tabs.TabItem
      label={
        <>
          <Icon icon="check-circle" /> 自定义图标
        </>
      }>
      this is card one
    </Tabs.TabItem>
    <Tabs.TabItem label="tab2">this is content two</Tabs.TabItem>
  </Tabs>
)
storiesOf('Tabs Component', module)
  .add('Default Tabs', defaultTabs)
  .add('Different Style Card', cardTabs)
  .add('UserDefined Card', customTabs)
